<template>
  <div class="pages">
    <headerbar>密码修改</headerbar>
    <div class="">
      <div class="">
        <div class="">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell list-item">
              原密码：
              <span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="oldPwd" placeholder="请输入原密码" value="" /></span>
            </li>
            <li class="mui-table-view-cell list-item">
              新密码<span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="newPwd" placeholder="请输入新密码" value="" /></span>
            </li>
            <li class="mui-table-view-cell list-item">
              确认密码<span class="mine-lists-content mui-pull-right">
									<input autocomplete="false" class="setup-input" type="password" v-model="confirmPwd" placeholder="请输入新密码" value="" /></span>
            </li>
          </ul>
          <div class="pdv-3"></div>
          <div @click="save()" class="default-block-btn mgh-2">确认修改</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      }
    },
    methods: {
      save () {
        if (this.newPwd.length < 8) {
          return tools.alert('长度必须在8-20位之间')
        }
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)/.test(this.newPwd) === false) {
          return tools.alert('密码必须包含数字和字母')
        }
        if (this.newPwd !== this.confirmPwd) {
          return tools.alert('两次密码不一致')
        }
        loginService.updatePassword(this.newPwd, this.oldPwd).then((res) => {
          if (res.code === 200 && res.message.indexOf('密码修改成功') > -1) {
            tools.alert(res.message)
            this.loginOut()
          } else {
            tools.alert(res.message)
          }
        })
      },
      loginOut () {
        this.$localStorage.remove('userInfo')
        this.$router.replace({name: 'login'})
      }
    }
  }
</script>

<style scoped lang="scss">
  .setup-input {
    height: 30px !important;
  }
</style>
